<template>
  <section class="bgff p20" style="height:100%;">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="选择月份">
        <el-date-picker
          v-model="value1"
          type="month"
					placeholder="选择月份"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="检测人">
        <el-input v-model="formInline.user" placeholder="检测人"></el-input>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-select v-model="formInline.region" placeholder="设备名称">
          <el-option label="设备A" value="A"></el-option>
          <el-option label="设备B" value="B"></el-option>
          <el-option label="设备C" value="C"></el-option>
          <el-option label="设备D" value="D"></el-option>
          <el-option label="设备E" value="E"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
		<div>
			<div id="myChart7" style="width:100%;height:500px;"></div>
		</div>
  </section>
</template>

<script>
import tabled from "@/components/tabledata.vue";
export default {
  components: { tabled },
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      value1: ""
    };
	},
	mounted() {
		this.drawBar()
   },
  methods: {
    onSubmit() {
      this.drawBar()
		},
		 drawBar(){
			 let myChart = this.$echarts.init(document.getElementById("myChart7"));
			 let narr = new Array();
			 let darr = new Array();
			 	for(var i = 1;i<=31;i++){
					narr.push(i)
					darr.push(parseInt(Math.random()*2000))
				}
        myChart.setOption( {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        })
    }
  }
};
</script>

<style lang="less">
</style>
